<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">

<body>
    <div id="app">
        <div class="container">
            <!-- 搜索 -->
            <form class="form-inline" style="padding: 20px 0">
                <input type="text" class="form-control" v-model.trim="keyword" placeholder="输入关键字进行搜索">
            </form>
            <!-- 表格 -->
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>资产名称</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item ,i) in list">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td><a href="#" @click.prevent="Del(item.id)">删除</a></td>
                    </tr>
                    <tr>
                        <td colspan="4" v-if="list.length == 0">没有数据了</td>
                    </tr>
                </tbody>
            </table>
            <!-- 添加资产 -->
            <form class="form-inline">
                <input type="text" class="form-control" v-model.trim="assets.name" placeholder="资产名称">
                <input type="text" class="form-control" v-model.number="assets.price" placeholder="资产价格">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-primary" @click.prevent="add">添加资产</button>
            </form>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                //用来接收从后台获取的数据
                list: [

                ],
                keyword: '',
                //用来储存用户输入的值
                assets: {
                    name: '',
                    price: ''
                }
            },
            //铺设页面功能
            created() {
                this.lood();
            },
            watch: {
                keyword(newval, oldval) {
                    axios({
                        method: 'GET',
                        url: 'http://localhost:3000/assets',
                        params: {
                            name_like: this.keyword
                        }
                    }).then(res => {
                        this.list = res.data
                        // this.lood();
                    })
                }
            },
            methods: {

                //添加功能
                add() {
                    console.log(this.assets);
                    let { name, price } = this.assets
                    if (name === '') {
                        alert('名字不能为空')
                        return
                    }
                    if (price <= 0) {
                        alert('请输入正确的价格')
                        return
                    }
                    //调用添加接口
                    axios({
                        method: 'POST',
                        url: 'http://localhost:3000/assets',
                        data: {
                            name,
                            price
                        }
                    }).then(res => {
                        console.log(res);
                        this.lood();
                        this.assets.name = ''
                        this.assets.price = ''
                    })
                },

                //封装铺设页面功能
                lood() {

                    axios({
                        method: 'GET',
                        url: 'http://localhost:3000/assets'
                    }).then(res => {
                        console.log(res);
                        this.list = res.data
                    })
                },

                //删除功能
                Del(id) {
                    // 获取删除接口
                    if (!window.confirm('确定要删除吗?')) {
                        return
                    }
                    axios({
                        method: 'DELETE',
                        url: 'http://localhost:3000/assets/' + id,
                    }).then(res => {
                        this.lood();
                    })
                }
            }
        })
    </script>
</body>

</html>